<template>
	<view class="content">
		<scroll-view @scrolltolower="handleScrollToLower" class="remove_tabbar bg" scroll-y :lower-threshold="300">
			<view v-for="(item,index) in msgArr" class="ul" :key="index">
				<view class="li">
					<view class="dis aic mrb20">
						<image src="/static/image/tongZhi.png" class="li_icon" mode="widthFix"></image>
						<view class="li_title">
							{{item.title}}
						</view>
					</view>
					<view class="msg">
						{{item.content}}
					</view>
					<view class="time">
						{{item.createTime | formatDateTime }}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部tabbar -->
		<Tabbar :current-page="currentPage"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/compontents/Tabbar.vue'
	import {
		messageList
	} from '@/api.js'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				currentPage: 'msg',
				pageNo: 1,
				pageSize: 10,
				total: 0,
				msgArr: []
			}
		},
		onLoad(options) {
			this.init()
		},
		filters: {
			formatDateTime(value) {
				if (!value) return '';
				return value.substring(0, 16);

			}
		},
		methods: {
			init() {
				this.getList()
			},
			handleScrollToLower() {
				let pageNo = this.pageNo
				let pageSize = this.pageSize
				let total = this.total
				console.log('一共' + total + '条，当前已经加载' + pageSize * pageNo + '条');
				if (total <= pageNo * pageSize) {
					console.log('已经到底了');
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				this.pageNo++;
				this.getList();
				uni.hideLoading();
			},

			async getList() {
				let res = await messageList({
					pageNo: this.pageNo,
					pageSize: this.pageSize
				})
				this.msgArr = this.msgArr.concat(res.result.records)
				this.total = res.result.total
				console.log('消息列表res', res);
			},

		},
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #F6F6F6;
	}

	.ul {
		width: 690rpx;
		margin: 0 auto;

		.li {
			padding: 26rpx 40rpx;
			box-sizing: border-box;
			background: #fff;
			margin: 10rpx 0;

			.li_icon {
				width: 50rpx;
				margin-right: 10rpx;
			}

			.li_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}

			.msg {
				ont-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #777777;
			}

			.time {
				width: 100%;
				text-align: right;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #C9C9C9;
			}
		}
	}

	.mrb20 {
		margin-bottom: 20rpx;
	}
</style>